import { getImageUrl } from '@/shared/lib';
import { Button } from '@/shared/ui';
import Image from 'next/image';

import cs from './LearningItem.module.scss';

interface Props {
  cover?: string;
  title?: string;
  price?: number;
  oldPrice?: number;
  link: string;
}

export function LearningItem({ cover, title, price, oldPrice, link }: Props) {
  return (
    <Button
      aria-label={`${title} ${price || oldPrice}`}
      className={cs.block}
      data-testid="link-course"
      href={link}
      link
      target="_blank"
    >
      <div className={cs.cover}>
        <Image
          alt={title || 'course cover'}
          fill
          sizes="(max-width: 768px) 50vw, (max-width: 1024px) 25vw, (max-width: 1366px) 20vw, 20vw"
          src={getImageUrl(cover)}
        />
      </div>
      <span className={cs.title}>{title}</span>
      {(price || oldPrice) && (
        <p className={cs.price}>
          {price ? <>{price} ₽</> : <>{oldPrice} ₽</>} {price && <span className={cs.oldPrice}>{oldPrice} ₽</span>}
        </p>
      )}
    </Button>
  );
}
